<template>
  <!-- 外成最大的盒子 -->
  <div class="panel">
    <!-- 弹出输入框 @close='cancel'绑定取消按钮事件-->
    <el-dialog title="编辑面板" :visible="panelShow" @close="cancel">
      <!-- 表单区域 -->
      <el-form :model="form" label-width="100px">
        <el-form-item label="权限名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="权限标识">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="form.description"></el-input>
        </el-form-item>
        <el-form-item label="企业可见">
          <!-- <el-input v-model="form.enVisible"></el-input> -->
          <!-- 企业可见数据使用开关 -->
          <el-switch
            v-model="form.enVisible"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="1"
            inactive-value="0"
            active-text="可见"
            inactive-text="不可见"
          >
          </el-switch>
        </el-form-item>
        <div class="box">
          <el-button type="primary" @click="submit">提交</el-button>
          <el-button @click="cancel">取消</el-button>
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
// 导入修改数据的请求，和获取数据的请求
import { getPerByIdApi, updatePerByIdApi, addPerApi } from "@/api/permission";
export default {
  // 向父组件要数据用来控制面板的显示
  props: ["panelShow"],

  data() {
    return {
      // 定义表单的数据源
      form: {
        enVisible: 0,
        name: "",
        code: "",
        description: "",
        type: "",
        pid: "",
      },
    };
  },

  // 定义一个方法
  methods: {
    // 定义一个方法用来保存type和pid
    saveopen(type, pid) {
      // 保存type到form数据中
      this.form.type = type;
      // 保存pid到form数据中
      this.form.pid = pid;
    },

    // ----------------------------------------------定义根据点击的这一项的id获取数据
    async getPerById(id) {
      // 发送请求获取数据
      const res = await getPerByIdApi(id);
      // 保存数据
      this.form = res.data.data;
    },

    // --------------------------------------------给取消设置点击事件关闭面板
    cancel() {
      // 修改父组件中的方法使用$emit
      this.$emit("update:panelShow", false);
      // 清空数据
      this.form = {
        enVisible: 0,
        name: "",
        code: "",
        description: "",
        type: "",
        pid: "",
      };
    },

    // --------------------------------------------------给提交设置点击事件
    async submit() {
      // 判断是新增还是修改有id就是修改没有就是新增
      if (this.form.id) {
        // 发送请求修改权限参数就是修改的对象内容
        await updatePerByIdApi(this.form);
      } else {
        // 新增的发送请求
        await addPerApi(this.form);
      }
      // 提示用户修改数据成功
      this.$message.success(this.form.id ? "修改成功" : "新增成功");
      // 关闭修改面板
      this.$emit("update:panelShow", false);
      // 更新数据
      this.$emit("updateList");
      // 清空数据
      this.form = {
        enVisible: 0,
        name: "",
        code: "",
        description: "",
        type: "",
        pid: "",
      };
    },
  },
};
</script>

<style>
.box {
  text-align: center;
}
</style>
